<template>
	<view>
		<bg-video></bg-video>
		<cu-custom bgColor="bg-yellow" :isBack="true">
			<block class="text-white" slot="content">佣金列表</block>
		</cu-custom>

		<view>
			<view>
				<view class="padding-xs" v-for="(item, index) in commissionList" :key="index">
					<view class="margin-sm shadow bg-white padding-xs relative" @click="toYjDetail(item.itemid)">
						<view class="flex">
							<view class="w-100">
								<view class="padding-xs flex justify-between align-baseline text-lg">
									<text class="">{{item.sname || '未知门店'}}</text>
								</view>
								<view class="padding-xs flex justify-between align-baseline">
									<text>公司: {{item.zjgsnc}}</text>
									<text>业务员: {{item.zjname}}</text>
								</view>
								<view class="padding-xs flex justify-between align-baseline">
									<text>预约时间: {{item.ct || '未填写'}}</text>
								</view>
								<view class="padding-xs flex justify-between align-baseline">
									<text>佣金金额: <text class="text-red text-lg">￥{{item.commission / 100}}</text>元</text>
									<text>原始金额: ￥{{item.amont / 100}}元</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 加载更多提示 -->
			<view v-if="commissionList.length < pageInfo.total" class="padding flex flex-direction">
				<button @tap="loadMore" class="cu-btn bg-yellow lg">显示更多</button>
			</view>
			
			<view v-if="pageInfo.total == 0" class="padding text-center">
				<text>暂无记录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data: function() {
			return {
				commissionList: [],
				pageInfo: {
					current: 1,
					total: 0,
					size: 5
				},
				zjid: undefined,
				zjgsid: undefined,
			};
		},
		onLoad: function(option) {
			if (option.zjid) {
				this.zjid = option.zjid;
			}
			
			if (option.zjgsid) {
				this.zjgsid = option.zjgsid;
			}
			this.loadCommission();
		},
		methods: {
			toYjDetail(itemid) {
				uni.navigateTo({
					url: '/pages/czj/yj/detail?itemid=' + itemid
				});
			},

			loadCommission: function() {
				let param = {
					current: this.pageInfo.current,
					size: this.pageInfo.size,
				};
				if (this.zjid) {
					param.zjid = this.zjid;
				}
				if (this.zjgsid) {
					param.zjgsid = this.zjgsid;
				}
				this.api("/zj/commission/items/page").send(param).then(res => {
					const commissionArray = res.records;
					if (commissionArray && commissionArray.length > 0) {
						commissionArray.forEach(record => {
							this.commissionList.push(record);
						});
						this.pageInfo.total = res.total;
					}
				});
			},

			loadMore: function() {
				if (this.commissionList.length < this.pageInfo.total) {
					this.pageInfo.current++;
					this.loadCommission();
				}
			}
		}
	};
</script>

<style>
</style>